import React, { Component } from 'react';
import './Navs.scss'
interface Props {

}
interface State{
    navlist:any
}

interface Nav{
   state:State
   props:Props
}
class Nav extends Component {
    constructor(props: Props) {
        super(props)
        this.state = {
            navlist: [
                {
                    navid: 1,
                    title: "嗨购超市",
                    img: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png"
                },
                {
                    navid: 2,
                    title: "数码电器",
                    img: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg"
                },
                {
                    navid: 3,
                    title: "嗨购服饰",
                    img: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg"
                },
                {
                    navid: 4,
                    title: "嗨购生鲜",
                    img: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg"
                },
                {
                    navid: 5,
                    title: "嗨购到家",
                    img: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg"
                },
                {
                    navid: 6,
                    title: "充值缴费",
                    img: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg"
                },
                {
                    navid: 7,
                    title: "9.9元拼",
                    img: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg"
                },
                {
                    navid: 8,
                    title: "领券",
                    img: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg"
                },
                {
                    navid: 9,
                    title: "领金贴",
                    img: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg"
                },
                {
                    navid: 10,
                    title: "plus会员",
                    img: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg"
                }
            ],
        }
    }
    render() {
        return (
            <div className='navs'>
{
    this.state.navlist.map((item:any,index:number)=>{
        return (
            <div className="nav" key={index}>
                <img src={item.img} alt="" />
                <p>{item.title}</p>
            </div>
        )
    })
}
            </div>
        );
    }
}

export default Nav;